
<template>
    <div class="home-container">
        <el-row class="main-row" :gutter="20">
            <el-col :span="24">
                <div class="banner-wrapper">
                    <el-carousel height="450px" :interval="5000" arrow="always">
                        <el-carousel-item v-for="item in bannerList" :key="item.id">
                            <a :href="item.link" target="_blank">
                                <img :src="item.img" alt="" class="banner-image">
                            </a>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-col>
        </el-row>
        <el-row class="content-row" :gutter="20">
            <el-col :span="19">
                <div class="news-wrapper">
                    <el-divider>企业招聘在线考试系统</el-divider>
                    <el-divider content-position="left">招聘动态</el-divider>
                    <el-card v-for="item in listData" :key="item.id" class="news-card" @click.native="$router.push('/front/detail?id=' + item.id)">
                        <div class="news-item">
                            <img :src="item.img" alt="" class="news-image">
                            <div class="news-content">
                                <div class="news-title">{{ item.name }}</div>
                                <div class="news-summary">{{ item.removeTag.slice(0, 60) }}……</div>
                                <div class="news-meta">
                                    <span><i class="el-icon-view"></i> {{ item.views }}人看过</span>
                                    <span><i class="el-icon-timer"></i> {{ formatCreateTime(item.createTime) }}</span>
                                    <span><i class="el-icon-user-solid"></i> {{ item.user }}</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="link-wrapper">
                    <el-divider class="custom-divider">友情链接</el-divider>
                    <el-card>
                        <el-link v-for="item in linkList" :key="item.id" :href="item.link" target="_blank" class="link-item">{{ item.name }}</el-link>
                    </el-card>
                </div>
                <div class="notification-wrapper">
                    <el-divider class="custom-divider">系统通知</el-divider>
                    <el-collapse v-model="activeNames" accordion>
                        <el-collapse-item :title="item.name" :name="item.id" v-for="item in noticeList" :key="item.id">
                            <div>发布时间：{{ formatCreateTime(item.createTime) }}</div>
                            <div>发布内容：{{ item.content }}</div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import utils from "@/utils/utils";
    import moment from 'moment-timezone'; // 导入 moment-timezone
    export default {
        name: "FrontHome",
        data() {
            return {
                bannerList: [],
                listData: [],
                activeNames: ['1'],
                noticeList: [],
                linkList:[]
            }
        },
        created() {
            this.$axios.get("/banner/list").then(res => {
                console.log(res.data)
                this.bannerList = res.data
            })
            this.getNoticeList()
            this.getNewsList()
        },
        methods: {
            getNoticeList() {
                this.$axios.get("/notice/list").then(res => {
                    this.noticeList = res.data
                })
                this.$axios.get("/link/list").then(res => {
                    this.linkList = res.data
                })
            },
            getNewsList() {
                this.$axios.get("/news/page", {
                    params: {
                        pageNum:1,
                        pageSize:5
                    }
                }).then(res => {
                    this.listData = res.data.list
                    this.listData.forEach(v => {
                        v.removeTag = utils.stripHTMLTagsWithRegex(v.content)
                    })
                    this.total = res.data.total
                })
            },
            // 格式化时间
            formatCreateTime(createTime) {
                //console.log(`Formatting time: ${createTime}`);
                return moment(createTime).add(8, 'hours').format('YYYY-MM-DD HH:mm:ss');
            }
        }
    }
</script>

<style>
    .home-container {
        font-family: 'Arial', sans-serif;
        color: #cccccc;
    }

    .main-row {
        margin-bottom: 20px;
    }

    .banner-wrapper {
        width: 95%;
        margin: auto;
    }

    .banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content-row {
        margin-top: 20px;
    }

    .news-wrapper {
        background-color: #fff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .news-card {
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
        border: none;
    }

    .news-card:hover {
        transform: translateY(-5px);
    }

    .news-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .news-image {
        width: 170px;
        height: 110px;
        object-fit: cover;
        margin-right: 15px;
    }

    .news-content {
        flex: 1;
    }

    .news-title {
        font-size: 17px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .news-summary {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
    }

    .news-meta {
        font-size: 12px;
        color: #999;
        display: flex;
        justify-content: space-between;
    }

    .link-wrapper {
        background-color: #f9f9f9;
        border-radius: 8px;
        padding: 15px;
    }

    .custom-divider {
        text-align: center;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .link-item {
        display: block;
        margin-bottom: 10px;
        color: #409eff;
        text-decoration: none;
    }

    .link-item:hover {
        text-decoration: underline;
    }

    .notification-wrapper {
        margin-top: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        padding: 15px;
    }
</style>